<template>
  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="表名称" prop="tableName">
          <el-input placeholder="请输入仓库名称" v-model="info.tableName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="表描述" prop="tableComment">
          <el-input placeholder="请输入" v-model="info.tableComment" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实体类名称" prop="className">
          <el-input placeholder="请输入" v-model="info.className" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="作者" prop="functionAuthor">
          <el-input placeholder="请输入" v-model="info.functionAuthor" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { computed,reactive,onMounted,toRefs} from 'vue'

export default defineComponent({
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  setup(props,context){
    const { proxy } = getCurrentInstance();//关键代码
    const basicInfoForm=ref(null)
    const staticData=reactive({
      boolean:false,
      info:props.info,
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        tableComment: [
          { required: true, message: "请输入表描述", trigger: "blur" }
        ],
        className: [
          { required: true, message: "请输入实体类名称", trigger: "blur" }
        ],
        functionAuthor: [
          { required: true, message: "请输入作者", trigger: "blur" }
        ]
      }
    })
    const size = computed(() => {
        return store.getters['setting/size'];
    });

    const small =computed(() => {
      return size.value=='small'?true:false
    });

    onMounted(() => {
    // console.log(props.info,'-----------------')
    
  })
  const validates = () => {
      // 在子组件中定义表单验证的逻辑
      console.log("---------在子组件中定义表单验证的逻辑----------")
       //basicInfoForm.value.validate()
       return basicInfoForm.value.validate(valid => {
        if (valid) {
          return true
        }else{
          return false
        }
      })
    };
    const modeldata = () => {
        return staticData.info;
    };
    return {
      size,
      small,
      validates,
      modeldata,
      basicInfoForm,
      ...toRefs(staticData)
    }
  }
})
</script>
